<html>
<head>
<meta charset="utf-8">
<!-- SEO -->
<meta name="description" content="">
<meta name="keywords" content="">
<title>GPC-游戏玩家的狂欢节</title>
<link rel="stylesheet" href="css/public.css" />
<link rel="stylesheet" href="css/index.css" />
<style>
.bottom-nav{
	width: 900px;
	border-top: 4px solid #DCDDDD;
	padding-top: 10px;
	margin: auto;
}
.bn-item{
	width: 33.332%;
	float: left;
}
.bn-title{
	margin: 0;
	padding: 0;
	color: #898989;
	font-size: 18px;
	font-weight: normal;
	text-align: center;
}
.bn-link{
	color: #979797;
	font-size: 14px;
	margin: 0 10px;
	display: block;
}
.bn-item .left{
	text-align: left;
}
.bn-item .center{
	text-align: center;
}
</style>
</head>
<body>
	<!-- 头部 -->
	<div class="header">
		<img class="web-logo" src="images/logo.png"/>
		<div class="user-bar">
			<img class="ub-img" src="images/r.png" />
			<span>亲爱的玩家，您可以</span>
			<a href="login.html">登录</a>
			<span>或者</span>
			<a href="register.html">注册</a>
			</div>
		<div class="header-nav clear">
			<a class="header-item" href="javascript:;">
				<span class="text">首页</span>
				<span class="subText">Home</span>
			</a>
			<a class="header-item" href="news.html">
				<span class="text">新闻</span>
				<span class="subText">News</span>
			</a>
			<a class="header-item" href="video-center.html">
				<span class="text">视频</span>
				<span class="subText">Video</span>
			</a>
			<a class="header-item" href="javascript:alert('建设中');">
				<span class="text">攻略</span>
				<span class="subText">Raiders</span>
			</a>
			<a class="header-item" href="photo_and_title.html">
				<span class="text">图文并茂</span>
				<span class="subText">Photo And Title</span>
			</a>
			<a class="header-item" href="javascript:alert('建设中');">
				<span class="text">博文故事</span>
				<span class="subText">Story</span>
			</a>
			<a class="header-item" href="game-center.html">
				<span class="text">GPC联赛</span>
				<span class="subText">League Match</span>
			</a>
			<a class="header-item" href="javascript:alert('建设中');">
				<span class="text">论坛</span>
				<span class="subText">Forum</span>
			</a>
		</div>
	</div>
	<div class="index-back-slides">
		<div class="slides-box" id="slides-box">
			<div class="sb-item"><img class="banner-img" src="images/slides/slides1.jpg" /></div>
			<div class="sb-item"><img class="banner-img" src="images/slides/slides2.jpg" /></div>
			<div class="sb-item"><img class="banner-img" src="images/slides/slides1.jpg" /></div>
			<div class="sb-item"><img class="banner-img" src="images/slides/slides2.jpg" /></div>
		</div>
		<div class="ibs-bar">
		
		</div>
	</div>
	<div class="container">
		<div class="left-list">
			<!-- 首页轮播图 -->
			<div class="event-slides" id="event-slides">
				<div class="event-slides-box">
					<a href="http://www.baidu.com"><img class="banner-img" src="images/slides/shi.jpg" /></a>
					<a href="http://www.baidu.com"><img class="banner-img" src="images/slides/shi.jpg" /></a>
					<a href="http://www.baidu.com"><img class="banner-img" src="images/slides/shi.jpg" /></a>
					<a href="http://www.baidu.com"><img class="banner-img" src="images/slides/shi.jpg" /></a>
					<a href="http://www.baidu.com"><img class="banner-img" src="images/slides/shi.jpg" /></a>
				</div>
				<ul class="es-active clear">
					<li class="esa-item">
						<div class="esa-box-active">
							<div class="esa-cent cent_vertical">
								<p class="esa-text cent_vertical_cen">GPC 2015风暴英雄线上联赛...</p>
							</div>
						</div>
					</li>
					<li class="esa-item">
						<div class="esa-box">
							<div class="esa-cent cent_vertical">
								<p class="esa-text cent_vertical_cen">GPC 2015风暴英雄线上联赛...</p>
							</div>
						</div>
					</li>
					<li class="esa-item">
						<div class="esa-box">
							<div class="esa-cent cent_vertical">
								<p class="esa-text cent_vertical_cen">GPC 2015风暴英雄线上联赛...</p>
							</div>
						</div>
					</li>
					<li class="esa-item">
						<div class="esa-box">
							<div class="esa-cent cent_vertical">
								<p class="esa-text cent_vertical_cen">GPC 2015风暴英雄线上联赛...</p>
							</div>
						</div>
					</li>
					<li class="esa-item">
						<div class="esa-box">
							<div class="esa-cent cent_vertical">
								<p class="esa-text cent_vertical_cen">GPC 2015风暴英雄线上联赛...</p>
							</div>
						</div>
					</li>
				</ul>
			</div><!-- ./首页轮播图 -->
			<!-- 今日热点 -->
			<div class="present-hot">
				<h1 class="model-label">
					<i class="model-icon icon-hot"></i>
					今日热点
					<a class="ml-more" href="http://www.baidu.com/"><i class="model-icon ml-icon"></i>查看更多</a>
				</h1>
				<ul class="ph-cent clear">
					<li class="phc-item">
						<a class="ph-video" href="http://www.baidu.com/">
							<img class="banner-img" src="images/slides/shi.jpg" />
							<p class="phv-text  text-warp">
								<span>GPC 联赛2015 YKG vs HJC第一场 精彩对决</span>
							</p>
						</a>
					</li>
					<li class="phc-item">
						<a class="ph-video" href="http://www.baidu.com/">
							<img class="banner-img" src="images/slides/shi.jpg" />
							<p class="phv-text  text-warp">
								<span>GPC 联赛2015 YKG vs HJC第一场 精彩对决</span>
							</p>
						</a>
					</li>
					<li class="phc-item">
						<a class="ph-video" href="http://www.baidu.com/">
							<img class="banner-img" src="images/slides/shi.jpg" />
							<p class="phv-text  text-warp">
								<span>GPC 联赛2015 YKG vs HJC第一场 精彩对决</span>
							</p>
						</a>
					</li>
					<li class="phc-item">
						<a class="ph-video" href="http://www.baidu.com/">
							<img class="banner-img" src="images/slides/shi.jpg" />
							<p class="phv-text text-warp">
								<span>GPC 联赛2015 YKG vs HJC第一场 精彩对决</span>
							</p>
						</a>
					</li>
				</ul>
			</div><!-- ./今日热点 -->
			<!-- 视频中心 -->
			<div class="video-center">
				<h1 class="model-label">
					<i class="model-icon icon-video"></i>
					视频中心
					<a class="ml-subIcon" href="http://www.baidu.com/"><i class="ml-file"></i>我要投稿</a>
					<a class="ml-more" href="http://www.baidu.com/"><i class="model-icon ml-icon"></i>查看更多</a>
				</h1>
				<ul class="video-tabs clear">
					<li class="vt-item active">赛事视频</li>
					<li class="vt-item">暗黑破坏神3</li>
					<li class="vt-item">炉石传说</li>
					<li class="vt-item">风暴英雄</li>
				</ul>
				<ul class="video-panel">
					<li class="vp-item active">
						<ul class="video-list clear">
							<li class="vl-item">
								<a class="vl-box" href="http://www.baidu.com/">
									<img class="banner-img" src="images/slides/shi.jpg" />
									<p class="vlb-text">GPC联赛2015 YKG vs HJC第一场</p>
								</a>
							</li>
							<li class="vl-item">
								<a class="vl-box" href="http://www.baidu.com/">
									<img class="banner-img" src="images/slides/shi.jpg" />
									<p class="vlb-text">GPC联赛2015 YKG vs HJC第一场</p>
								</a>
							</li>
							<li class="vl-item">
								<a class="vl-box" href="http://www.baidu.com/">
									<img class="banner-img" src="images/slides/shi.jpg" />
									<p class="vlb-text">GPC联赛2015 YKG vs HJC第一场</p>
								</a>
							</li>
							<li class="vl-item">
								<a class="vl-box" href="http://www.baidu.com/">
									<img class="banner-img" src="images/slides/shi.jpg" />
									<p class="vlb-text">GPC联赛2015 YKG vs HJC第一场</p>
								</a>
							</li>
							<li class="vl-item">
								<a class="vl-box" href="http://www.baidu.com/">
									<img class="banner-img" src="images/slides/shi.jpg" />
									<p class="vlb-text">GPC联赛2015 YKG vs HJC第一场</p>
								</a>
							</li>
							<li class="vl-item">
								<a class="vl-box" href="http://www.baidu.com/">
									<img class="banner-img" src="images/slides/shi.jpg" />
									<p class="vlb-text">GPC联赛2015 YKG vs HJC第一场</p>
								</a>
							</li>
						</ul>
					</li>
					<li class="vp-item">
						<ul class="video-list clear">
							<li class="vl-item">
								<a class="vl-box" href="http://www.baidu.com/">
									<img class="banner-img" src="images/slides/shi.jpg" />
									<p class="vlb-text">GPC联赛2015 YKG vs HJC第一场</p>
								</a>
							</li>
						</ul>
					</li>
					<li class="vp-item">
						<ul class="video-list clear">
							<li class="vl-item">
								<a class="vl-box" href="http://www.baidu.com/">
									<img class="banner-img" src="images/slides/shi.jpg" />
									<p class="vlb-text">GPC联赛2015 YKG vs HJC第一场</p>
								</a>
							</li>
							<li class="vl-item">
								<a class="vl-box" href="http://www.baidu.com/">
									<img class="banner-img" src="images/slides/shi.jpg" />
									<p class="vlb-text">GPC联赛2015 YKG vs HJC第一场</p>
								</a>
							</li>
						</ul>
					</li>
					<li class="vp-item">
						<ul class="video-list clear">
							<li class="vl-item">
								<a class="vl-box" href="http://www.baidu.com/">
									<img class="banner-img" src="images/slides/shi.jpg" />
									<p class="vlb-text">GPC联赛2015 YKG vs HJC第一场</p>
								</a>
							</li>
						</ul>
					</li>
				</ul>
			</div><!-- ./视频中心 -->
			<!-- 游戏指南 -->
			<div class="game-raiders">
				<h1 class="model-label">
					<i class="model-icon icon-raider"></i>
					游戏指南
					<a class="ml-subIcon" href="http://www.baidu.com/"><i class="ml-file"></i>我要投稿</a>
					<a class="ml-more" href="http://www.baidu.com/"><i class="model-icon ml-icon"></i>查看更多</a>
				</h1>
				<div class="grt-box">
					<ul class="grt-tabs clear">
						<li class="grt-tab-active">
							<img class="grt-icon" src="images/a1.png"/>
							<img class="grt-icon-active" src="images/a2.png"/>
						</li>
						<li class="grt-tab">
							<img class="grt-icon" src="images/a1.png"/>
							<img class="grt-icon-active" src="images/a2.png"/>
						</li>
						<li class="grt-tab">
							<img class="grt-icon" src="images/a1.png"/>
							<img class="grt-icon-active" src="images/a2.png"/>
						</li>
					</ul>
					<ul class="grt-panel">
						<li class="grt-item-active">
							<ul class="grti-tabs clear">
								<li class="grti-tab">公告</li>
								<li class="grti-tab">论坛</li>
								<li class="grti-tab-active">攻略</li>
							</ul>
							<ul class="grti-panel">
								<li class="grti-item">
									<a class="grti-text" href="http://www.baidu.com/">[攻略]打远古传奇装备的十大姿势<span class="time">2015/07/01</span></a>
									<a class="grti-text" href="http://www.baidu.com/">[攻略]打远古传奇装备的十大姿势<span class="time">2015/07/01</span></a>
									<a class="grti-text" href="http://www.baidu.com/">[攻略]打远古传奇装备的十大姿势<span class="time">2015/07/01</span></a>
									<a class="grti-text" href="http://www.baidu.com/">[攻略]打远古传奇装备的十大姿势<span class="time">2015/07/01</span></a>
									<a class="grti-text" href="http://www.baidu.com/">[攻略]打远古传奇装备的十大姿势<span class="time">2015/07/01</span></a>
									<a class="grti-text" href="http://www.baidu.com/">[攻略]打远古传奇装备的十大姿势<span class="time">2015/07/01</span></a>
									<a class="grti-text" href="http://www.baidu.com/">[攻略]打远古传奇装备的十大姿势<span class="time">2015/07/01</span></a>
									<a class="grti-text" href="http://www.baidu.com/">[攻略]打远古传奇装备的十大姿势<span class="time">2015/07/01</span></a>
								</li>
								<li class="grti-item">
									<a class="grti-text" href="http://www.baidu.com/">[攻略]打远古传奇装备的十大姿势<span class="time">2015/07/01</span></a>
									<a class="grti-text" href="http://www.baidu.com/">[攻略]打远古传奇装备的十大姿势<span class="time">2015/07/01</span></a>
									<a class="grti-text" href="http://www.baidu.com/">[攻略]打远古传奇装备的十大姿势<span class="time">2015/07/01</span></a>
									<a class="grti-text" href="http://www.baidu.com/">[攻略]打远古传奇装备的十大姿势<span class="time">2015/07/01</span></a>
								</li>
								<li class="grti-item-active">
									<a class="grti-text" href="http://www.baidu.com/">[攻略]打远古传奇装备的十大姿势<span class="time">2015/07/01</span></a>
									<a class="grti-text" href="http://www.baidu.com/">[攻略]打远古传奇装备的十大姿势<span class="time">2015/07/01</span></a>
									<a class="grti-text" href="http://www.baidu.com/">[攻略]打远古传奇装备的十大姿势<span class="time">2015/07/01</span></a>
									<a class="grti-text" href="http://www.baidu.com/">[攻略]打远古传奇装备的十大姿势<span class="time">2015/07/01</span></a>
									<a class="grti-text" href="http://www.baidu.com/">[攻略]打远古传奇装备的十大姿势<span class="time">2015/07/01</span></a>
									<a class="grti-text" href="http://www.baidu.com/">[攻略]打远古传奇装备的十大姿势<span class="time">2015/07/01</span></a>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div><!-- ./游戏指南 -->
		</div>
		<!-- 右侧内容 -->
		<div class="right-list">
			<!-- 热门焦点 -->
			<div class="hot-news">
				<div class="hn-box">
					<a class="hn-title" href="http://www.baidu.com/"><i class="model-icon hot-icon"></i>GPC联赛正式开赛</a>
					<ul class="hn-list">
						<li class="hn-item"><a href="http://www.baidu.com/">加入旅店大乱斗！<span>2015/06/14</span></a></li>
						<li class="hn-item"><a href="http://www.baidu.com/">加入旅店大乱斗！<span>2015/06/14</span></a></li>
						<li class="hn-item"><a href="http://www.baidu.com/">加入旅店大乱斗！<span>2015/06/14</span></a></li>
						<li class="hn-item"><a href="http://www.baidu.com/">加入旅店大乱斗！<span>2015/06/14</span></a></li>
						<li class="hn-item"><a href="http://www.baidu.com/">加入旅店大乱斗！<span>2015/06/14</span></a></li>
						<li class="hn-item"><a href="http://www.baidu.com/">加入旅店大乱斗！<span>2015/06/14</span></a></li>
						<li class="hn-item"><a href="http://www.baidu.com/">加入旅店大乱斗！<span>2015/06/14</span></a></li>
					</ul>
				</div>
			</div><!-- ./热门焦点 -->
			<!-- 赛事中心 -->
			<div class="competition-center">
				<h1 class="model-label">
					<i class="model-icon icon-competition"></i>
					赛事中心
					<a class="ml-more" href="http://www.baidu.com/"><i class="model-icon ml-icon"></i>查看更多</a>
				</h1>
				<a href="http://www.baidu.com/">
					<img class="banner-img" src="images/slides/shi.jpg"/>
				</a>
				<ul class="cc-link-tabs clear">
					<li class="cc-tab-active" style="text-align: left;">
						<i class="cc-icon"></i>
						积分榜
					</li>
					<li class="cc-tab" style="text-align: center;">
						<i class="cc-icon"></i>
						赛程
					</li>
					<li class="cc-tab" style="text-align: right;">
						<i class="cc-icon"></i>
						赛程规则
					</li>
				</ul>
				<ul class="cc-panel">
					<li class="cp-panel-active"><a href="http://www.baidu.com/"><img class="banner-img" src="images/z.png"/></a></li>
					<li class="cp-panel"><a href="http://www.baidu.com/"><img class="banner-img" src="images/z.png"/></a></li>
					<li class="cp-panel"><a href="http://www.baidu.com/"><img class="banner-img" src="images/z.png"/></a></li>
				</ul>
			</div><!-- ./赛事中心 -->
			<!-- 本周免费英雄 -->
			<div class="active-character">
				<h1 class="model-label">
					<i class="model-icon icon-character"></i>
					本周免费英雄
					<span class="ml-more">77.01-07.08</span>
				</h1>
				<div class="character-box">
					<img class="character-image" src="images/b.png"/>
					<ul class="clear">
						<li class="character-item"><img class="character-img" src="images/slides/shi.jpg"/></li>
						<li class="character-item"><img class="character-img" src="images/slides/shi.jpg"/></li>
						<li class="character-item"><img class="character-img" src="images/slides/shi.jpg"/></li>
						<li class="character-item"><img class="character-img" src="images/slides/shi.jpg"/></li>
						<li class="character-item"><img class="character-img" src="images/slides/shi.jpg"/></li>
						<li class="character-item"><img class="character-img" src="images/slides/shi.jpg"/></li>
						<li class="character-item"></li>
						<li class="character-item"><img class="character-img" src="images/slides/shi.jpg"/></li>
						<li class="character-item"></li>
					</ul>
				</div>
			</div><!-- ./本周免费英雄 -->
			<!-- 图片壁纸 -->
			<div class="games-pic">
				<h1 class="model-label">
					<i class="model-icon icon-gpic"></i>
					图片壁纸
					<a class="ml-more" href="http://www.baidu.com/"><i class="model-icon ml-icon"></i>查看更多</a>
				</h1>
				
				<div class="gpic-box" id="gpic-box">
					<ul class="gpic-list clear">
						<li class="gpic-item">
							<a href="http://www.baidu.com/"><img class="banner-img" src="images/slides/shi.jpg" height="460" /></a>
						</li>
						<li class="gpic-item">
							<a href="http://www.baidu.com/"><img class="banner-img" src="images/slides/shi.jpg" height="460"/></a>
						</li>
						<li class="gpic-item">
							<a href="http://www.baidu.com/"><img class="banner-img" src="images/slides/shi.jpg" height="460"/></a>
						</li>
					</ul>
					<button class="gpic-btn" id="gpic-prev"></button>
					<button class="gpic-btn" id="gpic-next"></button>
				</div>
			</div>
		</div>
	</div>
	<!-- 底部 -->
	<div class="bottom-nav">
		<ul class="clear">
			<li class="bn-item">
				<h2 class="bn-title">联系我们</h2>
				<a class="bn-link left" href="http://www.baidu.com/">TEL:17756037679</a>
				<a class="bn-link left" href="http://www.baidu.com/">E-MAIL:nhm910924@163.com</a>
			</li>
			<li class="bn-item">
				<h2 class="bn-title">推荐板块</h2>
				<a class="bn-link center" href="http://www.baidu.com/">视频中心</a>
				<a class="bn-link center" href="http://www.baidu.com/">图文故事</a>
				<a class="bn-link center" href="http://www.baidu.com/">互动论坛</a>
			</li>
			<li class="bn-item">
				<h2 class="bn-title">关于我们</h2>
				<a class="bn-link center" href="http://www.baidu.com/">合作洽谈</a>
				<a class="bn-link center" href="http://www.baidu.com/">反馈建议</a>
			</li>
		</ul>
	</div>
</body>
<script type="text/jscript" src="js/public.js"></script>
<script type="text/jscript" src="js/slides.js"></script>
<script>
	$(function(){
		var slides = new FadeAnimation('#slides-box', {
			autoPlayer: 5e3
			,speed: 500
			,callback: function(){
			}
		})
		,eventBox = new MoveSlides('#event-slides',{
			autoPlay: 5e3
			,slided: function(active){
				$('.es-active').find('.esa-box-active').attr('class', 'esa-box');
				$('.es-active .esa-box').eq(active).attr('class', 'esa-box-active');
			}
		})
		,games_pic = new MoveSlides('#gpic-box',{
			autoPlay: 2e3
		});
		
		//视频中心选项卡
		$('.vt-item,.vt-item-active').on('click mouseover', function(e){
			e.preventDefault();
			e.stopPropagation();
			var index = $(this).index();
			$(this).parent().children().removeClass('active').eq(index).addClass('active');
			$('.vp-item').removeClass('active').eq(index).addClass('active');
		});
		
		//游戏指南选项卡
		$('.grt-tab,.grt-tab-active').on('click mouseover', function(e){
			e.preventDefault();
			e.stopPropagation();
			var index = $(this).index();
			$(this).parent().children().attr('class','grt-tab').eq(index).attr('class','grt-tab-active');
			$('.grt-panel').children().attr('class', 'grt-item').eq(index).attr('class','grt-item-active');
		});
		$('.grti-tab,.grti-tab-active').on('click', function(e){
			e.preventDefault();
			e.stopPropagation();
			var index = $(this).index();
			$(this).parent().children().attr('class','grti-tab').eq(index).attr('class','grti-tab-active');
			$('.grti-panel').children().attr('class', 'grti-item').eq(index).attr('class','grti-item-active');
		});
		
		//视频中心
		$('.cc-tab, .cc-tab-active').on('click mouseover', function(e){
			e.preventDefault();
			e.stopPropagation();
			var index = $(this).index();
			$(this).parent().children().attr('class','cc-tab').eq(index).attr('class','cc-tab-active');
			$('.cc-panel').children().attr('class', 'cp-panel').eq(index).attr('class','cp-panel-active');
		});
		
		//图片壁纸操作按钮
		$('#gpic-next').on('click', function(e){
			e.preventDefault();
			e.stopPropagation();
			games_pic.next();
		});
		$('#gpic-prev').on('click', function(e){
			e.preventDefault();
			e.stopPropagation();
			games_pic.prev();
		});
		
		$('.esa-item').on('mouseover',function(){
			eventBox.setActive($(this).index());
		});
		
		//窗口适应，防止奔溃
		$(window).resize(function(){
			var win_width = $(window).width();
			$('#slides-box, .header').css('width', win_width < 1000 ? '1000px' : '100%');
		});
		$(window).resize();
	});
</script>
</html>